//   sideBar交互逻辑开始
let moreBtn = document.querySelector(".moreBtn");
let sidebarMask = document.querySelector(".sidebar_mask");
let sideBar = document.querySelector(".sideBar");
let sideBarLi = document.querySelector(".sideBar_li");
var sidebarStatus=1;
// console.log(moreBtn)?
 moreBtn.onclick=function () { 
    if(sidebarStatus==1){
        sidebarMask.style.display="block";
        setTimeout(() => {
            sideBar.style.height="150px";
            sidebarStatus=0
        }, 200);
      
    }else{
         sideBar.style.height="0px"; 
        setTimeout(() => {
           sidebarMask.style.display="none";
            sidebarStatus=1
        }, 300);
        
    }
 }
 sidebarMask.onclick = function () { 
       sideBar.style.height="0px"; 
        setTimeout(() => {
           sidebarMask.style.display="none";
            sidebarStatus=1
        }, 300);
  }
sideBar.onclick = function (e) { 
    e.stopPropagation();

 }
$("#backBtn2").click(function () { 
    $(".usersPage").css({'display':"none"});
    
})
$("#sideBar_users").click(function () { 
    sideBar.style.height="0px";
    setTimeout(() => {
           sidebarMask.style.display="none";
            sidebarStatus=1
        }, 300);
    $(".usersPage").css({'display':"block"});
})
//   sideBar交互逻辑结束  
  



var myInformation={}
// 存储当前用户信息的全局变量
var userName,userSno,userAvatar;
// 连接socket服务
   var socket = io("http://localhost:3002");
    localStorage.setItem("userName1","小王");
    localStorage.setItem("userSno1","17103001");

// 1、 获取用户的登入信息,验证D登入状态
var userName1 = localStorage.getItem("userName2");
var userSno1 = localStorage.getItem("userSno2");
var userAvatar1= '../img/headSculpture/hc01.jpg';
myInformation={
    userName:"乐乐"+Math.floor(Math.random()*(99+1-0)+0),
    userSno:"171030"+Math.floor(Math.random()*(99+1-0)+0),
    userAvatar:userAvatar1,
}
// 分发验证登入事件
socket.emit("login",myInformation)

// 2、监听登入错误的事件
socket.on("loginError",data=>{
    console.log(data)
})


// 3、监听登入聊天室成功的事件
socket.on("loginSuccess",data=>{
    console.log("新用户进入聊天室成功：",data)
    //  console.log("新用户进入聊天室成功：",data.msg.userName)
    // 设置个人信息
    $("#myavastar").attr("src",data.msg.userAvatar)
    $("#myuserName").text("我("+data.msg.userName+")")
    $("#myuserSno").text(data.msg.userSno)
    // 将登入用户的信息保存到客户端全局变量中
    userName = data.msg.userName;
    userSno = data.msg.userSno;
    userAvatar = data.msg.userAvatar;


})

// 4、监听新用户进入群聊广播事件
socket.on("addUser",data=>{
    //  console.log("addUser数据：",data)
    $(".comu_con_box").append(`
        <div class="systemInfo childNode">
            ----<span>${data.userName}</span>进入了群聊----
        </div>
    `)
})

// 5、监听当前用户数量的广播事件
socket.on("userCount",users=>{
    //  console.log("当前用户数：",users,users.length)
    //  将当前用户数量渲染到客户端去
    $(".usersCount").text(users.length)
    $(".userLi_wrap").html("")
    // 渲染所有在线用户列表
    users.forEach(item => {
        if(item.userName!=myInformation.userName){
            $(".userLi_wrap").append(`
                <li class="user_li">
                        <i class="avastar"><img src="../img/headSculpture/hc06.jpg" alt=""></i>
                        <span class="userName">${item.userName}</span>
                        <span class="userSno">${item.userSno}</span>

                </li>
            `)
        }
        
    });
   

})

// 6、监听新用户离开群聊广播事件
socket.on("delUser",data=>{
     console.log("delUser数据：",data)
    $(".comu_con_box").append(`
        <div class="systemInfo childNode">
            ----<span>${data.userName}</span>离开了群聊----
        </div>
    `)
})


// 7、聊天功能
$("#InfoSendBtn").click(function () {
    $("#faceDivBox").css({"display":"none"});
    var Information = $("#infoContent").html();
    // console.log(Information)
    $("#infoContent").html("");
    // 将输入的消息发送给服务
    socket.emit("sendMassage",{
        msg:Information,
        userName:userName,
        userSno : userSno,
        userAvatar : userAvatar

    })
})

// 将从服务端接收的数据显示在聊天窗口中
socket.on("receiveMessage",function(data){
    console.log("服务端广播过来的聊天数据信息是：",data)
    if (data.userName===userName) {//自己的信息
        // console.log(data.userName===userName)
        $(".comu_con_box").append(`
            <div class="myInfo_wrap childNode" style="width: 100%;overflow:auto">
             <li class="myInfo_box">
                <span class="personImg">
                    <img src="${data.userAvatar}" alt="">
                </span>
                <div class="text_content">
                    <span class="personName">我</span>
                        <p class="info_content">${data.msg}</p>
                </div>
             </li>
           </div>
            `)
       // 调用方法
       scrollIntoView()

    }else{//别人的信息
         $(".comu_con_box").append(`
            <div class="otherInfo_wrap childNode" style="width: 100%;overflow:auto">
                <li class="otherInfo_box">
                    <span class="personImg">
                        <img src="${data.userAvatar}" alt="">
                    </span>
                    <div class="text_content">
                        <span class="personName">${data.userName}(${data.userSno})</span>
                            <p class="info_content">${data.msg}</p>
                    </div>
                </li>
           </div>
            `)
         // 调用方法
       scrollIntoView()

    }
})

// 封装元素滚动到可视区域的方法
function scrollIntoView(){
    //当前元素的底部滚动到可视区
    let eles = document.getElementsByClassName('childNode');
    eles[eles.length - 1] && eles[eles.length - 1].scrollIntoView();
    console.log("lastDiv",eles[eles.length - 1])


}


// 8、发送图片功能
$("#updateImg").on("change",function(){
    var file = this.files[0];
    // 需要把这个文件发送到服务器端，借助h5新增加的fileReader
    var fr = new FileReader(file);
    fr.readAsDataURL(file);
    fr.onload = function () {
        socket.emit("sendImg",{
            img:fr.result,
            userName:userName,
            userSno : userSno,
            userAvatar : userAvatar

        })
    }

})
// 监听图片聊天消息
socket.on("receiveImg",function(data){
     console.log("服务端广播过来的图片消息数据信息是：",data)
    if (data.userName===userName) {//自己的信息
        // console.log(data.userName===userName)
        $(".comu_con_box").append(`
            <div class="myInfo_wrap childNode" style="width: 100%;overflow:auto">
             <li class="myInfo_box">
                <span class="personImg">
                    <img src="${data.userAvatar}" alt="">
                </span>
                <div class="text_content">
                    <span class="personName">我</span>
                        <p class="info_content"><img src=${data.img.data}" alt="" width="150px" height="150px"></p>
                </div>
             </li>
           </div>
            `)
       // 调用方法
       scrollIntoView()

    }else{//别人的信息
         $(".comu_con_box").append(`
            <div class="otherInfo_wrap childNode" style="width: 100%;overflow:auto">
                <li class="otherInfo_box">
                    <span class="personImg">
                        <img src="${data.userAvatar}" alt="">
                    </span>
                    <div class="text_content">
                        <span class="personName">${data.userName}(${data.userSno})</span>
                            <p class="info_content"><img src=${data.img}" alt="" width="150px" height="150px"></p>
                    </div>
                </li>
           </div>
            `)
         // 调用方法
       scrollIntoView()
   }

})

// 9.初始化表情包插件
$("#emojiBtn").click(function(){
    console.log("表情图标被点击了")

})

// 10.聊天室公告
$("#qrBtn").click(function(){
  $(".gonggaoPage").fadeOut();
})
$("#sideBar_gg").click(function(){
  $(".gonggaoPage").fadeIn();
   sideBar.style.height="0px";
    setTimeout(() => {
           sidebarMask.style.display="none";
            sidebarStatus=1
        }, 300);
})
